<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ gender }}</p>
  </div>

  <div>
    <p>点击改变</p>
    <button @click="name = 'change占山'">改变名字</button>
    <button @click="age = 'change28'">改变年纪</button>
    <button @click="gender = 'change中性'">改变性别</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const sty = reactive({
      name: "占山",
      age: "16",
      gender: "男",
    });

    const data = toRefs(sty);
    return {
      ...data,
    };
  },
};
</script>

<style></style>
